<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>首页</legend>
</fieldset>

<div style="padding: 20px; background-color: #FAFAFA;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">用户人数</div>
                <div class="layui-card-body">
                    当前用户总数<br>
                    <p id="userCount">3</p>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">管理员人数</div>
                <div class="layui-card-body" >
                    当前管理员人数<br>
                    <p id="adminCount">3</p>

                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">物资种类</div>
                <div class="layui-card-body">
                    当前物资种类<br>
                    <p id="materialCount">3</p>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">物资总数</div>
                <div class="layui-card-body">
                    当前物资总数<br>
                    <p id="totalCount">3</p>
                </div>
            </div>
        </div>

    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>抗击疫情，人人有责</legend>
</fieldset>

<p style="text-align: center;font-size: 25px;font-weight: bold;">请核对你的管理员信息</p>
<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>人物</th>
            <th>民族</th>
            <th>出场时间</th>
            <th>格言</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心</td>
            <td>汉族</td>
            <td>1989-10-14</td>
            <td>人生似修行</td>
        </tr>
        <tr>
            <td>张爱玲</td>
            <td>汉族</td>
            <td>1920-09-30</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
        <tr>
            <td>Helen Keller</td>
            <td>拉丁美裔</td>
            <td>1880-06-27</td>
            <td> Life is either a daring adventure or nothing.</td>
        </tr>
        <tr>
            <td>岳飞</td>
            <td>汉族</td>
            <td>1103-北宋崇宁二年</td>
            <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
        </tr>
        <tr>
            <td>孟子</td>
            <td>华夏族（汉族）</td>
            <td>公元前-372年</td>
            <td>猿强，则国强。国强，则猿更强！ </td>
        </tr>
        </tbody>
    </table>
</div>

<p style="text-align: center;font-size: 25px;font-weight: bold;">有你陪伴，真好</p>





<script>
    var $;
    layui.use(['element', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        $ = layui.jquery;

        //监听折叠
        element.on('collapse(test)', function(data){
            layer.msg('展开状态：'+ data.show);
        });

        $.ajax({
            type : "get",
            url : "/home/adminCount",
            success : function (data){
                console.log(data);
                $("#adminCount").html(data);
                // document.getElementById("adminCount").innerText(data);
            }
        });

        $.ajax({
            type : "get",
            url : "/home/userCount",
            success : function (data){
                console.log(data);
                $("#userCount").html(data);
                // document.getElementById("adminCount").innerText(data);
            }
        });

        $.ajax({
            type : "get",
            url : "/home/materialCount",
            success : function (data){
                console.log(data);
                $("#materialCount").html(data);
                // document.getElementById("adminCount").innerText(data);
            }
        });

        $.ajax({
            type : "get",
            url : "/home/totalCount",
            success : function (data){
                console.log(data);
                $("#totalCount").html(data);
                // document.getElementById("adminCount").innerText(data);
            }
        });
    });


</script>

</body>
</html>